<template>
    <div class="jczq">
        <d-header title='竞彩篮球'><router-link class="back-home-icon" to='/'></router-link></d-header>	
        <div class="container has-header">
            <div class="banner" style="height:120px;background:#f90">
                 <d-banner></d-banner>
            </div>
            <div class="communal-nav">
            	<dl>
            		<dd :class='currType=="sf"?"active":""' @click='currType="sf"'>
            			<span>胜负</span>
            		</dd>
            		<dd :class='currType=="rfsf"?"active":""' @click='currType="rfsf"'>
            			<span>让分胜负</span>
            		</dd>
            		<dd :class='currType=="sfc"?"active":""' @click='currType="sfc"'>
            			<span>胜负差</span>
            		</dd>
            		<dd :class='currType=="dxf"?"active":""' @click='currType="dxf"'>
            			<span>大小分</span>
            		</dd>
            	</dl>
            </div>
            <div class="sports-details">
            	<div class="lottery-list">
            		<ul>
            			<li>
            				<div class="lotto-info">
            					<div class="lotto-issue clearfix">
            						<div class="lotto-type">
            							<span class="pl-5">{{pid}}期</span>
            						</div>
            					</div> 
            					<div 
                                    :class="{'more-issue-btn':1,'active':pidListState}"
                                    @click='pidListState = !pidListState'
                                    >
                                    <section>
                                        <span>更多期次</span> 
                                        <i class="c-arrow down"></i>
                                    </section> 
                                    <div class="opts">
                                        <div class="opts-list">
                                            <div v-for='(item,index) in pidList' :key='index' @click='changePid("jclq",item.did)'>{{item.did}}</div>
                                        </div>
                                    </div> 
            					</div>
            				</div>
            			</li>
            		</ul>
            	</div>
            	
                <div class="sports-main">
                    <div class="sports-table football">
                        <div class="sports-left">
                            <dl>
                                <dd>编号</dd>
                            </dl> 
                            <dl>
                                <dd v-for='(item,index) in data' :key='index'>{{item.cid}}</dd>
                            </dl>
                        </div> 
                        <div class="sports-right">
                            <div class="right-inner">
                                <dl>
                                    <dd>联赛</dd> <dd>客队</dd><dd></dd><dd>主队</dd><dd>比分</dd><dd>赛果</dd> 
                                    <!-- <dd>赔率</dd> -->
                                </dl> 
                                <dl v-for='(item,index) in data' :key='index'>
                                    <dd>{{item.title}}</dd> 
                                    <dd>{{item.gName}}</dd> 
                                    <dd>VS</dd> 
                                    <dd>{{item.hName}}</dd> 
                                    <dd>{{item.bf}}</dd> 
                                    <dd>{{item.sg[currType]}}</dd> 
                                    <!-- <dd>2.62</dd> -->
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

            	<div class="lotto-link entrance">
            		<dl class="clearfix">
                        <dd @click='goZx'>资讯</dd> 
                        <dd @click='gowf'>玩法</dd>
                    </dl>
            	</div>
            </div>
        </div>	
    </div>
</template>
<script>
import dHeader from '@/components/header'
import dBanner from "@/components/banner"
import {PidListJclq} from "@/request/api"
import {get} from "@/request/http"
import {getMatchRT,getMatchRS} from '@/assets/js/layout'
export default {
  name: 'detail',
  components: {
    dHeader,
    dBanner
  },
  data(){
    return {
        pid:'',
        pidList:[],
        data:[],
        pidListState:false,
        currType:'sf'
    }
        
  },
  methods:{
    getPidListJczq(){
        PidListJclq().then(v=>{
            this.pidList = v.rows.row || [];
        })
    },
    changePid(id,pid){
        this.getData(id,pid);
    },
    getData(id,pid){
        let _this = this;
        _this.pid = pid;
        get('/cpdata/match/'+id+'/award/'+pid+'/'+pid+'.json?_='+Math.random())
        .then(data=>{
            var rs = data.rows.row;
            if(rs && !rs.length){rs = new Array(rs);}
            if(rs.length > 0){
                var html = [];
                var num=0;
                rs.forEach(function(row,o){
                    let obj = {};
                    num++;
                    row.index=row.mid;
                    row.short_mt=row.mt.substring(5,16);
                    row.sname=row.mname.substr(0,4);
                    if(row.cl.length<3){row.cl="blue";}
                    if (parseInt(row.ic)==0){
                        if(row.rs.length>2){//已出赛果
                            row.bf=row.ss+":"+row.ms;
                            var rsstr=row.rs.split(";");
                            var rt=(row.ms*1-row.ss*1)*1;
                            if(rsstr[0].length>3){if(rt*1>0){row.spf="主胜";}else{row.spf="主负";}}
                            if(rsstr[2].length>4){
                                if(rt>0&&rt<6){row.cbf="主胜1-5";}
                                else if(rt>5&&rt<11){row.cbf="主胜6-10";}
                                else if(rt>10&&rt<16){row.cbf="主胜11-15";}
                                else if(rt>15&&rt<21){row.cbf="主胜16-20";}
                                else if(rt>20&&rt<26){row.cbf="主胜21-25";}
                                else if(rt>25){row.cbf="主胜26+";}
                                else if(rt>-6&&rt<0){row.cbf="客胜1-5";}
                                else if(rt>-11&&rt<-5){row.cbf="客胜6-10";}
                                else if(rt<-10&&rt>-16){row.cbf="客胜11-15";}
                                else if(rt<-15&&rt>-21){row.cbf="客胜16-20";}
                                else if(rt<-20&&rt>-26){row.cbf="客胜21-25";}
                                else if(rt<-25){row.cbf="客胜26+";}
                            }
                            rt=rsstr[1];
                            rt=rt.split(":")[1];
                            var rtstr=rt.split(",");
                            row.opstr1="";
                            var r1,r2,temp1;
                            for(let ii=0;ii<rtstr.length;ii++){
                                r1=rtstr[ii].split("|")[0];
                                r2+=rtstr[ii].split("|")[1]+"/";
                                if(ii==0){temp1=r1;}else if(temp1!=r1){row.jqs=row.jqs;}
                                if(r1*1>1){r1="让分主胜";}else{r1="让分主负";}
                                row.jqs=r1+"/";
                                row.jqs=row.jqs.replace("undefined","");
                                row.opstr1 =r2.replace("undefined","");
                            }
                            row.jqs=row.jqs.substring(0,row.jqs.lastIndexOf("/"));
                            row.opstr1 =row.opstr1.substring(0,row.opstr1.lastIndexOf("/"));

                            rt=rsstr[3];
                            rt=rt.split(":")[1];
                            var rtstr=rt.split(",");
                            row.opstr2="";
                            var r3,r4,temp2;
                            for(let ii=0;ii<rtstr.length;ii++){
                                r3=rtstr[ii].split("|")[0];
                                r4+=rtstr[ii].split("|")[1]+"/";
                                if(ii==0){temp2=r3;}else if(temp2!=r3){row.bqc=row.bqc;}
                                if(r3*1>1){r3="大分";}else{r3="小分";}
                                row.bqc=r3+"/";
                                row.bqc=row.bqc.replace("undefined","");
                                row.opstr2 =r4.replace("undefined","");
                            }
                            row.bqc=row.bqc.substring(0,row.bqc.lastIndexOf("/"));
                            row.opstr2 =row.opstr2.substring(0,row.opstr2.lastIndexOf("/"));
                        }else{
                            row.bf="开奖中";
                            row.spf="";
                            row.cbf="";
                            row.jqs="";
                            row.bqc="";
                        }
                    }else{//取消
                        row.bf="取消";
                        row.spf="-";
                        row.cbf="-";
                        row.jqs="-";
                        row.bqc="-";
                        row.url='-';
                    }
                    obj = {
                        cid: row.cid,
                        hName:row.mn,
                        gName:row.sn,
                        title:row.mname,
                        bf:row.bf,
                        sg:{
                            'sf':(row.spf===undefined?'-':row.spf),
                            'rfsf':(row.jqs===undefined?'-':row.jqs),
                            'dxf':(row.bqc===undefined?'-':row.bqc),
                            'sfc':(row.cbf===undefined?'-':row.cbf),
                        },
                    }
                    html.push(obj);
                })
                _this.data = html;  
            }
        })
    },
    goZx(){
        this.$router.push('/information/01')
    },
    gowf(){
        this.$router.push('/explain/71&竞彩篮球')
    }
  },
  created(){
    this.getPidListJczq();
    this.pid = this.$route.params.pid;
    this.getData('jclq',this.pid)
  }
};

</script>
<style lang="less" scoped>
@import '../../assets/style/detailjc.less';
</style>